<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="700px"
    top="3vh"
    @close="close"
  >
    <el-form ref="formRef" label-width="100px" :model="form" :rules="rules">
      <el-form-item label="附件">
        <div v-if="form.ApplyPics" style="display: flex; flex-wrap: wrap">
          <el-image
            v-for="(item, index) in attfilelist"
            :key="index"
            style="width: 100px; height: 100px; margin: 5px"
            :src="item"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="attfilelist"
            :initial-index="index"
            fit="cover"
          />
        </div>
      </el-form-item>
      <el-form-item label="申请ID" prop="PickApplyID">
        <el-input v-model="form.PickApplyID" disabled />
      </el-form-item>
      <el-form-item label="申请人" prop="title">
        <el-input v-model="form.PickStaff" disabled />
      </el-form-item>
      <el-form-item label="申请时间" prop="AddTime">
        <el-input v-model="form.AddTime" disabled />
      </el-form-item>
      <el-form-item label="客户名称" prop="title">
        <el-input v-model="form.CustomerAllName" disabled />
      </el-form-item>
      <el-form-item label="商机名称" prop="title">
        <el-input v-model="form.BusinessOrderName" disabled />
      </el-form-item>
      <el-form-item label="正在跟进人" prop="title">
        <el-input v-model="form.SaleStaffName" disabled />
      </el-form-item>
      <div v-if="isCheck">
        <el-form-item label="审核状态" prop="CheckState">
          <el-select
            v-model="form.CheckState"
            placeholder="请选择审核状态"
            :disabled="isCheckState"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="(item, index) in auditOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="审核原因" prop="CheckMemo">
          <div
            style="
              display: flex;
              width: 100%;
              justify-content: space-between;
              align-items: center;
            "
          >
            <el-input
              v-model="form.CheckMemo"
              type="textarea"
              placeholder="请输入审核原因"
              style="width: 80%"
            />
            <el-button style="margin-left: 20px" type="primary" @click="save">
              确 定
            </el-button>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <!-- <el-button @click="close">取 消</el-button> -->
      <!-- <el-button type="primary" @click="save">确 定</el-button> -->
    </template>
  </el-dialog>
</template>

<script>
  import { ApplyPick } from '@/api/customerPickcheck'

  export default defineComponent({
    name: 'CustomerPickcheckEdit',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        isCheckState: false,
        auditOptions: [
          {
            label: '待审核',
            value: 0,
          },
          {
            label: '已审核通过',
            value: 1,
          },
          {
            label: '未通过审核',
            value: -1,
          },
        ],
        formRef: null,
        form: {
          roles: [],
        },
        rules: {
          CheckState: [
            { required: true, trigger: 'blur', message: '请选择审核状态' },
          ],
        },
        title: '',
        dialogFormVisible: false,
        attfilelist: [],
        isCheck: 0,
      })

      const showEdit = (row, n) => {
        if (!row) {
          state.title = '申请挑入审核'
        } else {
          state.title = '申请挑入审核'
          state.form = Object.assign({}, row)
          state.isCheck = n
          if (state.form.CheckState === 1) {
            state.isCheckState = true
          } else {
            state.isCheckState = false
          }
        }
        console.log(row, '22222')
        const attfilelist = JSON.parse(row.ApplyPics)
        state.attfilelist = []
        attfilelist.forEach((item) => {
          state.attfilelist.push(item.url)
        })
        console.log('state.attfilelist', state.attfilelist)
        state.dialogFormVisible = true
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = {}
        state.dialogFormVisible = false
      }
      const save = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const dataMsg = {
              PickApplyID: state.form.PickApplyID,
              CheckState: state.form.CheckState,
              CheckMemo: state.form.CheckMemo,
            }
            const { message } = await ApplyPick(dataMsg)
            $baseMessage(message, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            close()
          }
        })
      }

      return {
        ...toRefs(state),
        showEdit,
        close,
        save,
      }
    },
  })
</script>
